<template>
  <div>
    关于我
    <hr>
    <ul class="nav">
      <!--<router-link to="/about" exact tag="li">
        <a>study</a>
      </router-link>
      <router-link to="/about/work" tag="li">
        <a>work</a>
      </router-link>
      <router-link to="/about/hobby" tag="li">
        <a>hobby</a>
      </router-link>-->

      <!--写成对象的形式-->

      <router-link :to="{name:'About'}" exact tag="li">
        <a>study</a>
      </router-link>
      <router-link :to="{name:'Work'}"  tag="li">
        <a>work</a>
      </router-link>
      <router-link :to="{name:'Hobby'}"  tag="li">
        <a>hobby</a>
      </router-link>
    </ul>
    <hr>

    改变前：{{text}}

    <router-view></router-view>

  </div>
</template>

<script>
  export default {
      data(){
          return {
              text:'改变前'
          }
      },
      //组件钩子函数
    beforeRouteEnter(to,from,next){
        console.log('beforeRouterEnter');
        next((vm)=>{
          vm.text = '改变了'
        })
    },
    //有子路由的二级导航 进入时触发
    beforeRouteUpdate(to,from,next){
        console.log('beforeRouteUpdate');
      next()
    },
    //有子路由的二级导航 离开时触发
    beforeRouteLeave(to,from,next){
      console.log('beforeRouteLeave');
      next()
    }
  }
</script>
<style>

</style>
